<template>
  <div class="pc-login_view">
    <div class="pc-login_view_header">
      <img
        src="@/assets/images/logo.png"
        class="pc-login_view_header_logo"
      />
      颐信巧思
    </div>
    <div class="pc-login_view_container">
      <div class="pc-login_view_container_form">
        <h3 class="pc-login_view_container_form_title">欢迎使用颐信巧思数智化系统</h3>
        <div class="pc-login_view_container_form_control">
          <a class="pc-login_view_container_form_control_tip" v-if="state.focus1 || login.userName">账号</a>
          <a class="pc-login_view_container_form_control_tips" v-if="!state.focus1 && !login.userName">请输入账号</a>
          <a-input
            v-model:value="login.userName"
            type="text"
            class="pc-login_view_container_form_control_value"
            :class="[(state.focus1 || login.userName) ? 'pc-login_view_container_form_control_values' : '']"
            @focus="toggleFocus('userName')" 
    		    @blur="removeFocus('userName')"
            autocomplete="new-username"
          />
        </div>
        <div class="pc-login_view_container_form_control">
          <a class="pc-login_view_container_form_control_tip" v-if="state.focus2 || login.passWord">密码</a>
          <a class="pc-login_view_container_form_control_tips" v-if="!state.focus2 && !login.passWord">请输入密码</a>
          <a-input
            v-model:value="login.passWord"
            :type="state.type"
            class="pc-login_view_container_form_control_value"
            :class="[(state.focus2 || login.passWord) ? 'pc-login_view_container_form_control_values' : '']"
            @focus="toggleFocus('passWord')" 
    		    @blur="removeFocus('passWord')"
            autocomplete="new-password"
          />
          <!-- <img
            :src="state.show ? eyeOn : eyeOff"
            class="pc-login_view_container_form_control_icon"
            @click="onShowPwd()"
          /> -->
          <i v-if="state.show" class="iconfont pc-login_view_container_form_control_icon" @click="onShowPwd()">&#xe6d4;</i>
          <i v-else class="iconfont pc-login_view_container_form_control_icon" @click="onShowPwd()">&#xe6b1;</i>
        </div>
        <div class="pc-login_view_container_form_agree">
          <a-checkbox v-model:checked="login.remember">
            我已阅读并同意颐信巧思 <a @click="showDetail($event)">《用户协议》</a> 和 <a @click="showDetail($event)">《隐私政策》</a>
          </a-checkbox>
        </div>
        <a-button
          @click="loginSubmit"
          type="primary"
          class="pc-login_view_container_form_submit"
          :class="[(login.userName!='' && login.passWord!='') ? 'active' : '']"
        >登录</a-button>
      </div>
    </div>
    <div class="pc-login_view_footer">
      <span class="pc-login_view_footer_powered">Powered by</span>
      <span class="pc-login_view_footer_name">颐信巧思</span>
      <img
        src="@/assets/images/icon1.png"
        class="pc-login_view_footer_icon"
      />
      <img
        src="@/assets/images/icon2.png"
        class="pc-login_view_footer_icon"
      />
    </div>
  </div>
</template>
<script setup>
import { reactive } from 'vue';
import { message } from 'ant-design-vue';
import {
  getLogin,
  getScmLogin,
  getWelynkLogin
} from '@/api/user';
import { useRoute, useRouter } from 'vue-router';
import eyeOn from '@/assets/images/eye-on.png';
import eyeOff from '@/assets/images/eye-off.png';
const Route = useRoute();
const router = useRouter();
console.log('Route', Route.meta.name)
const login = reactive({
  userName: '',
  passWord: '',
  remember: true,
});
const state = reactive({
  show: false,
  type: 'password',
  focus1: false,
  focus2: false,
});

let companyAppId = reactive({
  'agsitech': '64760f89d660d20008f28161',
  'feihongda': '645f300f304b76000886b51b',
  'huixin': '648413a12b740b0008c630a7',
  'dongpin': '64880dc1f3ecc50008fbae61',
  'pdm': '6522737c3b151d57d1890569',
  'scm': '6522737c3b151d57d1890569',
})

// let host = window.location.host;
// let companyAppId = reactive({
//   'localhost:5173': '64760f89d660d20008f28161',
//   'https://jiandaoyun.com/': '645f300f304b76000886b51b'
// })
const onFinish = values => {
  console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
const showDetail = (e) => {
  e.stopPropagation(); 
}
const loginSubmit = () => {
  let {
    userName,
    passWord
  } = login;
  if (!userName) {
    message.error('请输入用户名');
    return;
  }
  if (!passWord) {
    message.error('请输入密码');
    return;
  }
  let params = {
    userName,
    passWord,
    // company: companyAppId[import.meta.env.MODE]
    company: companyAppId[Route.meta.name]
  }
  if (Route.meta.name === 'scm') {
    getScmLogin(params)
      .then(res=>{
        let {
          message
        } = res;
        window.location.href = message;
      })
  }
  else if (Route.meta.name === 'sso') {
    getWelynkLogin(params)
      .then(res => {
        sessionStorage.setItem('sso', JSON.stringify(res));
        router.push({
          path: '/redirect',
        });
      });
  }
  else {
    getLogin(params)
      .then(res=>{
        let {
          message
        } = res;
        window.location.href = message;
      })
  }
}
const onShowPwd = () => {
  state.show = !state.show;
  state.show ? state.type = 'text' : state.type = 'password';
  console.log(state.show)
}
const toggleFocus = (key) => {
  if (key == 'userName') {
    state.focus1 = true;
    state.focus2 = false;
  } else {
    state.focus1 = false;
    state.focus2 = true;
  }
}
const removeFocus = (key) => {
  if (key == 'userName') {
    state.focus1 = false;
  } else {
    state.focus2 = false;
  }
}
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
